<script setup lang='ts'>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { loginApi } from '@/api/login'
import { ElMessage } from 'element-plus'

const router = useRouter()
// 用户信息
const formInline = reactive({
  username: '',
  password: ''
})

// 登录函数
const login = async () => {
  let data = {
    username: formInline.username,
    password: window.btoa(formInline.password),
    ClientId: 'apiClientPassword',
    ClientSecret: 'apiSecret'
  }
  let res = await loginApi(data)
  if (res.result.code !== 200) {
    ElMessage({
      message: `${res.result.msg}！！！`,
      type: 'error'
    })
    return
  } else {
    localStorage.setItem('token', res.result.data.accessToken)
    router.push('/index')
  }
}
</script>

<template>
  <div class="login-main-box">
    <div class="form-box">
      <div class="title">
        冀电寿阳安全监测系统
      </div>
      <div class="input-box">
        <el-input
          v-model="formInline.username"
          class="username-box"
          placeholder="用户名"
        />
        <el-input
          v-model="formInline.password"
          class="password-box"
          type="password"
          placeholder="密码"
        />
      </div>
      <div
        class="submit-btn"
        @click="login"
      >
        登录
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-main-box {
  /* width: 1440px;
  height: 750px; */
  width: 99vw;
  height: 99vh;
  background-image: url("../../assets/bckImg/loginbkI.png");
  background-repeat: no-repeat;
  background-size: 99vw 99vh;

  /* border: 1px solid red; */
  .form-box {
    /* width: 400px;
    height: 500px;
    margin-left: 740px;
  padding-top: 120px; */
  width: 20.8vw;
  height: 80vh;
  margin-left: 52.5vw;
  padding-top: 19.1vh;

    /* border: 1px solid blue; */
    .title {
      /* width: 400px;
      height: 49px; */
      width: 20.8vw;
      height: 4.54vh;
      color: #333;
      font-weight: 800;
      font-size: 36px;
      font-family: HXBNS,sans-serif;
      line-height: 42px;
      text-align: center;
      background-clip: text;
    }
    .input-box {
      /* margin-top: 20px; */
      margin-top: 2vh;
    }
    .submit-btn {
      /* width: 340px;
      height: 46px;
      margin-top: 60px;
      margin-left: 30px; */
      width: 17.71vw;
      margin-top: 3vh;
      margin-left: 1.56vw;
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      font-family: PingFang,sans-serif;
      line-height: 19px;
      line-height: 46px;
      text-align: center;
      background: #006CFF;
      border-radius: 0;
      opacity: 1;
    }
    .submit-btn:hover {
      cursor: pointer;
    }
    .submit-btn:active {
      background: rgba($color: #006CFF, $alpha: 70%);
    }
  }
}
</style>

<style lang="scss">
.username-box,
.password-box {
  width: 340px;
  height: 46px;
  margin-top: 40px;
  margin-left: 30px;
  background: #fff;
  border: 1px solid #006cff;
  border-radius: 2px;
  opacity: 1;
}
</style>

